<template>
  <el-dialog
    class="listEditDialog"
    :title="$t('选择媒体')"
    :visible="visible"
    :fullscreen="true"
    @update:visible="updateVisible"
    :close-on-click-modal="false"
    append-to-body
  >
    <div class="wrap-box">
      <!-- 目录树 -->
      <div class="menu-box">
        <media-menu-tree
          where="inner"
          :is-no-action="true"
          @currentNodeData="currentNodeDataChange"
          :api-obj="menuApiObj"
          :api-type="'1'"
        />
      </div>
      <!-- 素材缩略图 -->
      <div style="position: relative; overflow: hidden;">
        <div class="photo-box-search">
          <el-input
            clearable
            v-model="searchValLeft"
            @input="searchValLeftInput"
            :placeholder="$t('请输入关键词搜索')"></el-input>
        </div>
        <div class="photo-box">
          <mini-panel
            ref="miniPanel"
            :datas="mediaData"
            :options="{
              noPop: true,
              sizeType: 'bsmall',
            }"
            @dbClick="addRow"
          ></mini-panel>
        </div>
      </div>
      

      <!-- 操作按钮区 -->
      <div class="center">
        <el-button size="small" class="caretbtn" @click="ctrl('add')" :title="$t('添加')">
          <i class="el-icon-plus" style="font-size:12px; color:#666;"></i>
        </el-button>
        <el-button size="small" class="caretbtn" @click="ctrl('remove')" :title="$t('移除')">
          <i class="el-icon-minus" style="font-size:12px; color:#666;"></i>
        </el-button>
        <el-button size="small" icon="el-icon-refresh" @click="ctrl('switch')" :title="$t('替换')"></el-button>
        <el-button size="small" icon="el-icon-top" @click="ctrl('up')" :title="$t('上移')"></el-button>
        <el-button size="small" icon="el-icon-bottom" @click="ctrl('down')" :title="$t('下移')"></el-button>
        <el-button size="small" type="primary" @click="ctrl('ok')">{{ $t('确定') }}</el-button>
        <el-button size="small" @click="ctrl('cancel')">{{ $t('取消') }}</el-button>
      </div>

      <!-- 列表区 -->
      <div class="right">
        <el-scrollbar class="opration-container">
          <div class="list-title-row">
            <div class="list-title-row__left">
              <span class="title-color mr-30">{{ $t('播放列表') }}</span>
              <span class="mr-14 font13">{{ $t('播放模式') }}</span>
              <el-select v-model="mode" class="input-100 mr-20">
                <el-option
                  v-for="op in modeOpts"
                  :key="op.value"
                  :label="$t(op.label)"
                  :value="op.value"
                ></el-option>
              </el-select>
              <span class="mr-30 font13">{{ $t('总时长') }}：{{ totalTime }}</span>
              <span class="mr-20 font13">{{ $t('总容量') }}：{{ totalSize }}</span>
              <bs-action-drop-down
                class="input-100"
                :items="actionItems"
                @click="actionDropClick"
              ></bs-action-drop-down>
            </div>
            <div class="list-title-row__right">
              <el-input
                class="input-180 mr-10"
                :placeholder="$t('请输入关键词搜索')"
                v-model="searchVal"
                clearable
                style="width: 160px"
              >
                <template slot="prepend">
                  <i class="iconfont icon-sousuo" />
                </template>
              </el-input>
              <el-button @click="handleSearch" type="primary" size="small">{{ $t('搜索') }}</el-button>
            </div>
          </div>
        </el-scrollbar>
        <div class="list-area">
          <list
            ref="list"
            v-if="self_list"
            height="calc(100vh - 138px)"
            row-key="_id"
            :has-select="true"
            :list-data="self_list"
            :list-cols="listCols"
            :action-opts="actionOpts"
            :context-menus="listContextOptions"
            :no-storage="true"
            @contextMenuClicked="listContextMenuClicked"
            @cell-double-click="removeRow"
          >
            <div @dblclick.stop="() => {}" slot="startDateSlot" slot-scope="{ row }">
              <input-hms type="inner" v-model="row.startDate" :max="row.endDate" />
            </div>
            <div @dblclick.stop="() => {}" slot="endDateSlot" slot-scope="{ row }">
              <input-hms type="inner" v-model="row.endDate" :min="row.startDate" />
            </div>
            <div @dblclick.stop="() => {}" slot="durationSlot" slot-scope="{ row }">
              <el-input-number
                class="input-130"
                v-model="row.duration"
                :min="0"
                :max="36000"
                @change="(v) => {durationChange(v, row)}"
                controls-position="right"
              ></el-input-number>
            </div>
            <div @dblclick.stop="() => {}" slot="timesSlot" slot-scope="{ row }">
              <el-input-number
                :disabled="isDisableField(row, 'times')"
                class="input-100"
                v-model="row.times"
                :min="0"
                @change="(v) => {timesChange(v, row)}"
                controls-position="right"
              ></el-input-number>
            </div>
            <div @dblclick.stop="() => {}" slot="picturePlaySlot" slot-scope="{ row }">
              <el-select
                :disabled="isDisableField(row, 'picturePlay')"
                v-model="row.picturePlay"
              >
                <el-option
                  v-for="op in picturePlayArray"
                  :key="op.value"
                  :value="op.value"
                  :label="op.name"
                ></el-option>
              </el-select>
            </div>
            <div @dblclick.stop="() => {}" slot="textPlaySlot" slot-scope="{ row }">
              <el-select
                :disabled="isDisableField(row, 'textPlay')"
                v-model="row.textPlay"
              >
                <el-option
                  v-for="op in textPlayArray"
                  :key="op.value"
                  :value="op.value"
                  :label="op.name"
                ></el-option>
              </el-select>
            </div>
            <div @dblclick.stop="() => {}" slot="playVelocitySlot" slot-scope="{ row }">
              <el-select
                :disabled="isDisableField(row, 'playVelocity')"
                v-model="row.playVelocity"
              >
                <el-option
                  v-for="op in playVelocityArray"
                  :key="op.value"
                  :value="op.value"
                  :label="op.name"
                ></el-option>
              </el-select>
            </div>
            <div @dblclick.stop="() => {}" slot="typefaceSlot" slot-scope="{ row }">
              <el-select
                :disabled="isDisableField(row, 'typeface')"
                v-model="row.typeface"
              >
                <el-option
                  v-for="op in fontItemArray"
                  :key="op.value"
                  :value="op.value"
                  :label="op.name"
                ></el-option>
              </el-select>
            </div>
            <div @dblclick.stop="() => {}" slot="typefaceSizeSlot" slot-scope="{ row }">
              <el-input-number
                :disabled="isDisableField(row, 'typefaceSize')"
                class="input-100"
                v-if="row.typefaceSize"
                v-model="row.typefaceSize"
                :min="19"
                :max="256"
                controls-position="right"
              ></el-input-number>
            </div>
            <div @dblclick.stop="() => {}" slot="typefaceColourSlot" slot-scope="{ row }">
              <el-color-picker
                :disabled="isDisableField(row, 'typefaceColour')"
                v-model="row.typefaceColour"
              ></el-color-picker>
            </div>
            <div @dblclick.stop="() => {}" slot="volSlot" slot-scope="{ row }">
              <el-input-number
                :disabled="isDisableField(row, 'vol')"
                class="input-100"
                v-model="row.vol"
                :min="0"
                :max="100"
                controls-position="right"
              ></el-input-number>
            </div>
            <div @dblclick.stop="() => {}" slot="elecFenceIdSlot" slot-scope="{ row }">
              <el-select multiple collapse-tags v-model="row.elecFenceId">
                <el-option
                  v-for="(op) in aroundList"
                  :key="op.id"
                  :value="op.id"
                  :label="op.name"></el-option>
              </el-select>
            </div>
            <div @dblclick.stop="() => {}" slot="monopolizeSlot" slot-scope="{ row }">
              <el-checkbox
                v-model="row.monopolize"
                :true-label="1"
                :false-label="0"
              ></el-checkbox>
            </div>
            <div @dblclick.stop="() => {}" slot="aspectSlot" slot-scope="{ row }">
              <el-checkbox :disabled="row.mediaType !== 1" v-model="row.aspect"></el-checkbox>
            </div>
          </list>
        </div>
      </div>
    </div>

    <time-setting-dialog
      ref="timeSettingDialog" />

    <preview-dialog
      :append-to-body="true"
      :visible.sync="previewDialog.show"
      :pre-data="previewDialog.preData" />

    <upload-dialog
      :append-to-body="true"
      :visible.sync="uploadDialogShow"
      :init-user-id="ownerUserId"
      :init-folder-id="ownerUserId == '' ? folderId:''"
      @close="fetchList" />

  </el-dialog>
</template>

<script>
import MiniPanel from '../../components/MiniPanel'
import List from '@/components/List'
import MediaMenuTree from '../../components/MediaMenuTree'
import InputHms from '../../media-center/components/InputHms'
import TimeSettingDialog from './TimeSettingDialog'
import PreviewDialog from '../../components/PreviewDialog'
import UploadDialog from '../../media-center/components/UploadDialog'

import {getFileSize} from '@/utils'
import {FILETYPE} from '../../media-center/const'

import { listCtrl } from './listCtrlMixins'

import MediaApi from '@/api/media'

import {
  textPlayArray,
  playVelocityArray,
  picturePlayArray,
  fontItemArray,
} from '@/const'

export default {
  mixins: [listCtrl],
  components: {
    UploadDialog,
    PreviewDialog,
    TimeSettingDialog,
    MiniPanel,
    List,
    MediaMenuTree,
    InputHms,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default() {
        return []
      },
    },
    areaId: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      textPlayArray,
      playVelocityArray,
      picturePlayArray,
      fontItemArray,

      menuApiObj: {
        get: MediaApi.getCatalogue,
        bottomGet: MediaApi.getFollow,
        bottomGetList: MediaApi.getFollowCatalogue,
        getOtherMedia: MediaApi.getOtherMedia
      },

      previewDialog: {
        show: false
      },
      uploadDialogShow: false,

      // 目录树

      activeId: '', // 当前素材模版
      mediaData: [
        // {id: 1, imgUrl: 'https://th.bing.com/th/id/OIP.EM--SaZHJa8-kBztMRDB4gHaHa?pid=Api&rs=1', name: '111'},
        // {id: 2, imgUrl: 'https://th.bing.com/th/id/OIP.EM--SaZHJa8-kBztMRDB4gHaHa?pid=Api&rs=1', name: '111'},
        // {id: 3, imgUrl: 'https://th.bing.com/th/id/OIP.EM--SaZHJa8-kBztMRDB4gHaHa?pid=Api&rs=1', name: '111'},
        // {id: 4, imgUrl: 'https://th.bing.com/th/id/OIP.EM--SaZHJa8-kBztMRDB4gHaHa?pid=Api&rs=1', name: '111'},
        // {id: 5, imgUrl: 'https://th.bing.com/th/id/OIP.EM--SaZHJa8-kBztMRDB4gHaHa?pid=Api&rs=1', name: '111'},
        // {id: 6, imgUrl: 'https://th.bing.com/th/id/OIP.EM--SaZHJa8-kBztMRDB4gHaHa?pid=Api&rs=1', name: '111'},
        // {id: 7, imgUrl: 'https://th.bing.com/th/id/OIP.EM--SaZHJa8-kBztMRDB4gHaHa?pid=Api&rs=1', name: '111'},
        // {id: 8, imgUrl: 'https://th.bing.com/th/id/OIP.EM--SaZHJa8-kBztMRDB4gHaHa?pid=Api&rs=1', name: '111'},
        // {id: 9, imgUrl: 'https://th.bing.com/th/id/OIP.EM--SaZHJa8-kBztMRDB4gHaHa?pid=Api&rs=1', name: '111'},
        // {id: 10, imgUrl: 'https://th.bing.com/th/id/OIP.EM--SaZHJa8-kBztMRDB4gHaHa?pid=Api&rs=1', name: '111'},
        // {id: 11, imgUrl: 'https://th.bing.com/th/id/OIP.EM--SaZHJa8-kBztMRDB4gHaHa?pid=Api&rs=1', name: '111'},
        // {id: 12, imgUrl: 'https://th.bing.com/th/id/OIP.EM--SaZHJa8-kBztMRDB4gHaHa?pid=Api&rs=1', name: '111'},
        // {id: 13, imgUrl: 'https://th.bing.com/th/id/OIP.EM--SaZHJa8-kBztMRDB4gHaHa?pid=Api&rs=1', name: '111'},
        // {id: 14, imgUrl: 'https://th.bing.com/th/id/OIP.EM--SaZHJa8-kBztMRDB4gHaHa?pid=Api&rs=1', name: '111'}
      ],
      listCols: [
        { label: '开始时间', prop: 'startDate', minwidth: 140, slot: true },
        { label: '结束时间', prop: 'endDate', minwidth: 140, slot: true },
        { label: '文件名', prop: 'fileName', minwidth: 100 },
        { label: '播放时长(s)', prop: 'duration', minwidth: 160, slot: true },
        { label: '文件数', prop: 'durationPerPage', minwidth: 100 },
        { label: '播放次数', prop: 'times', minwidth: 125, slot: true },
        { label: '图片播放方式', prop: 'picturePlay', minwidth: 135, slot: true },
        { label: '文本播放方式', prop: 'textPlay', minwidth: 135, slot: true },
        { label: '播放速度', prop: 'playVelocity', minwidth: 110, slot: true },
        { label: '字体', prop: 'typeface', minwidth: 140, slot: true },
        { label: '字体大小', prop: 'typefaceSize', minwidth: 125, slot: true },
        { label: '字体颜色', prop: 'typefaceColour', minwidth: 110, slot: true },
        { label: '音量', prop: 'vol', minwidth: 125, slot: true },
        { label: '电子围栏', prop: 'elecFenceId', minwidth: 180, slot: true },
        { label: '围栏独占', prop: 'monopolize', minwidth: 110, slot: true },
        { label: '锁定比例', prop: 'aspect', minwidth: 110, slot: true },
      ],
      actionOpts: { show: false },
      listContextOptions: [
        { name: '设置播放时间' },
        { type: 'divider' },
        { name: '重排播放时间' },
      ],

      displayType: '1', // 1 缩略图 2 列表
      displayTypeOpts: [
        {
          value: '1',
          label: '缩略图',
        },
        {
          value: '2',
          label: '详细信息',
        },
      ],
      mediaListFetching: false,
      folderId: 0,
      ownerUserId:'',
      mode: 0, // 播放模式
      modeOpts: [
        { label: '循环播放', value: 0 },
        { label: '定时播放', value: 1 },
        { label: '顺序播放', value: 2 },
      ],
      actionItems: ['预览'],

      // 围栏选项
      aroundList: [],

      // 搜索值
      searchVal: '',
      searchValLeft: '',
      searchValLeftTimer: null

    }
  },
  watch: {
    mode: {
      immediate: true,
      handler(v) {
        const options = [
          { name: '设置播放时间' },
          { type: 'divider' },
          { name: '重排播放时间' }
        ]
        switch(v) {
          case 0:
            options[2].disabled = true
            break
          case 1:
            options[0].disabled = true
            break
          case 2:
            options[0].disabled = true
            options[2].disabled = true
            break
          default:
        }
        this.listContextOptions = options
      } 
    },
    visible(v) {
      if (!v) {
        this.$refs.miniPanel._clearActive()
        this._initSelfList(this.list)
      } else {
        this.fetchList()
      }
    }
  },
  computed: {
    totalTime() { // 总时长
      let _totalTime = 0
      this.self_list.forEach(item => {
        _totalTime += Number(item.duration)
      })
      const [H, m, s] = this._s2Hms(_totalTime)
      return `${H}时${m}分${s}秒`
    },
    totalSize() { // 总容量
      let _totalSize = 0
      this.self_list.forEach(item => {
        _totalSize += Number(item.fileSize)
      })
      return getFileSize(_totalSize)
    }
  },
  created() {
    this.fetchAroundList()
  },
  beforeDestroy() {
    this.searchValLeftTimer && clearTimeout(this.searchValLeftTimer)
  },
  methods: {
    searchValLeftInput(v) {
      if (this.searchValLeftTimer) {
        clearTimeout(this.searchValLeftTimer)
      }
      this.searchValLeftTimer = setTimeout(() => {
        this.searchValLeftTimer = null
        this.fetchList()
      }, 500);
    },
    timesChange(v, row) {
      let _info = row._info
      if (v == 0) {
        row.duration = _info.duration || 0
      } else {
        row.duration = 0
      }
    },
    durationChange(v, row) {
      if (v > 0) {
        row.times = 0
      } else {
        row.times = 1
      }
    },
    handleSearch() {
      // 搜索规则 --- 匹配到的排到排头并选上
      const _copyList = this.self_list.slice()
      const matchList = [] // 匹配到的元素
      const finalList = [] // 排序后的列表
      
      _copyList.forEach((item, index) => {
        // if (item.fileName.replace(/\..*/, '') === this.searchVal) {
        if(item.fileName.replace(/\..*/, '').indexOf(this.searchVal) > -1) {
          matchList.push(item)
          finalList.unshift(item)
        } else {
          finalList.push(item)
        }
      })
      if (matchList.length < 1) return this.$alert('提示', '未搜索到对应文件')
      this.self_list = finalList // 更新列表
      // 下一刻选上匹配到的元素
      this.$nextTick(() => {
        matchList.forEach(item => {
          this.$refs.list.$refs.list.toggleRowSelection(item, true)
        })
      })
    },
    getLeftItem() {
      return this.$refs.miniPanel.getActiveItem()
    },
    getRightItem() {
      let items = this.$refs.list.getActiveItem()
      return items.length === 1 ? items[0] : items.length === 0 ? null : items
    },
    ctrl(type) {
      switch (type) {
        case 'add':
          // 添加
          this.addRow(this.getLeftItem())
          break
        case 'remove':
          // 移除
          this.removeRow(this.getRightItem())
          break
        case 'up':
          // 上移
          this.upRow(this.getRightItem())
          break
        case 'down':
          // 下移
          this.downRow(this.getRightItem())
          break
        case 'switch':
          // 替换
          this.switchRow(this.getLeftItem(), this.getRightItem())
          break
        case 'ok':
          // 确定
          this.handleSubmit()
          break
        case 'cancel':
          this.updateVisible(false)
          // 取消
          break
        default:
      }
      this.$refs.miniPanel._clearActive()
    },
    actionDropClick(item) {
      const file = this.getRightItem()
      switch (item) {
        case '上传':
          // 打开上传窗口
          this.uploadDialogShow = true
          break
        case '预览':
          // 打开预览窗口
          this._openPreView(this.getRightItem())
          break
        default:
      }
    },
    async getInfo(id, cb) {
      const res = await MediaApi.getInfo({id})
      cb && cb(res)
    },
    _openPreView(file) {
      if (!file) {
        this.$alert('提示', '请先选择文件')
        return
      }
      if (file instanceof Array) {
        this.$alert('提示', '此操作不支持多选')
        return
      }
      const passFileType = [ // 能预览的文件类型
        FILETYPE.VIDEO,
        FILETYPE.AUDIO,
        FILETYPE.TEXT,
        FILETYPE.LOCAL_TEXT,
        FILETYPE.QRCODE,
        FILETYPE.NET_PICTURE,
        FILETYPE.PICTURE,
        FILETYPE.WEB_CAPTURE
      ]
      let _file = file._info || {}
      if (passFileType.indexOf(String(_file.type)) === -1) return this.$alert('提示', '对不起，该媒体类型无法预览')

      const _isText = [FILETYPE.TEXT,FILETYPE.LOCAL_TEXT].some(i => i === String(file.type))
      if (_isText) {
        this.getInfo(file.id, (res) => {
          let argus = res.argus ? JSON.parse(res.argus) : {}
          let attributes = argus.attributes
          if (attributes && typeof attributes === 'string') {
            attributes = JSON.parse(attributes)
          }
          this.previewDialog = {
            ...this.previewDialog,
            show: true,
            preData: {
              ...argus,
              ...file._info,
              ...res,
              ...attributes,
              showType: 3,
              _isText: true
            }
          }
        })
      } else {
        console.log({
          ...file,
          showType: 3,
          _isText: false
        })
        this.previewDialog = {
          ...this.previewDialog,
          show: true,
          preData: {
            showType: 3,
            _isText: false,
            ...file._info
          }
        }
      }
    },
    async fetchList() {
      const folderId = this.folderId // 目录id
      const ownerUserId = this.ownerUserId //用户id
      if(folderId === '' && ownerUserId === '') return
      if (this.mediaListFetching) return
      this.mediaListFetching = true
      try {
        let params = {
          auditState: 1,
          queryParam: this.searchValLeft,
          queryType: 1,
          current: 1,
          size: 9999,
          folderId
        }
        if (this.areaId) {
          const mediaType = this.mediaTypeMap[this.areaId.split('-')[0]]
          if (mediaType) {
            if (mediaType.length < 1) {
              this.mediaData = []
              return 
            }
            params.mediaType = mediaType
          }
        }
        if (ownerUserId) params.ownerUserId = ownerUserId
        const res = await MediaApi.get(params)
        this.mediaData = res.records.filter(item => item.validity).map((item) => {
          // const argus = JSON.parse(item.argus)
          return {
            // ...argus,
            ...item,
            // innerTags: item.innerTagss
          }
        })
      } catch (error) {
        console.log(error)
      } finally {
        this.mediaListFetching = false
      }
    },
    async fetchAroundList() {
      try {
        const res = await MediaApi.getProgramAround({
          current: 1,
          size: 999
        })
        this.aroundList = res.records ? res.records : []
      } catch (error) {
        console.log(error)
      }
    },
    currentNodeDataChange(data) {if (data.id === -1 || data.id === -2) { // 下级用户根目录被点击
        this.mediaData = []
        return 
      } else if (data._isSub || data._isOther) { 
        this.folderId = data && data.id != undefined ? data.id : 0
        this.ownerUserId = data.ownerUserId || ''
      } else {
        this.folderId = data ? data.id : 0
        this.ownerUserId = ''
      }
      this.fetchList()
    },
    updateVisible(v) {
      if (this.$_has('MEDIA_MEDIA_SAVE')) {
        this.actionItems = ['上传', '预览']
      }
      this.$emit('update:visible', v)
    },
    okClick(v) {
      this.fetching = true
      if (this.opType === '1') {
        this.$emit('addClick', this.self_form, this.fetchingEndCb)
      } else if (this.opType === '2') {
        this.$emit('updateClick', this.self_form, this.fetchingEndCb)
      } else {
        this.updateVisible(false)
      }
    },
    cancelClick() {
      this.updateVisible(false)
    },
    listContextMenuClicked(item) {
      console.log(item)
      const items = this.getRightItem()
      switch(item.option.name) {
        case '设置播放时间':
          if (!items) return this.$alert('提示', '请先选择媒体')
          this.$refs.timeSettingDialog.show({
            startDate: item.item.startDate,
            endDate: item.item.endDate,
            okCb: ({startDate, endDate}) => {
              if (items instanceof Array) {
                items.forEach(i => {
                  i.startDate = startDate
                  i.endDate = endDate
                })
              } else {
                items.startDate = startDate
                items.endDate = endDate
              }
              this.self_list = this.self_list.slice()
            }   
          })
          break
        case '重排播放时间':
          this.listTimeSet(this.mode)
          break
        default:
      }
    },
    handleSubmit() {
      //判断视频音频类播放长度必须为5的倍数
      // let _tag = true
      // this.self_list.forEach(item => {
      //   if (parseInt(item.duration) % 5 != 0) {
      //     _tag = false
      //   }
      // });
      // if (!_tag) {
      //   this.$message.error('音频或视频的播放时长只能为5的倍数，请修改')
      //   return
      // }

      this.$emit('update:list', this.self_list.map((item,index) => {
        let o = {
          ...item,
          sortNo: index,
          startDate: item.startDate.join(':'),
          endDate: item.endDate.join(':'),
          mode: this.mode
        }
        delete o._id
        return o
      }))
      this.updateVisible(false)
    },
    isVideooOrAudio(fileName) {
				const suportSuffix = [
          'AVI', 'MOV', 'MPG', 'MKV', 'MP4', 'VOB', 'TRP', 'TS', 'WMV', 'FLV',
          'MP3', 'WMA', 'AAC', 'WAV'
        ]
				const fileNameSplit = fileName.split('.')
				const suffix = fileNameSplit[fileNameSplit.length - 1].toUpperCase()
				if (suportSuffix.indexOf(suffix) === -1) return false
				return true
    },
  },
}
</script>

<style lang="scss" scoped>
// import '@/styles/bs-common.scss';

$info-row-h: 57px;
$border-style: 1px solid $bg-e9;

@mixin first-row() {
  height: 56px;
  display: flex;
  align-items: center;
}

.listEditDialog {
  ::v-deep .el-dialog__body {
    padding: 0 !important;
  }

  ::v-deep .el-dialog__header {
    border-bottom: $border-style;
  }
}

.input-180 {
  width: 180px;
}
.input-130 {
  width: 130px;
}
.input-100 {
  width: 100px;
}
.font13{font-size:13px;}
.mr-9 {
  margin-right: 9px;
}
.mr-10 {
  margin-right: 10px;
}
.mr-14 {
  margin-right: 14px;
}
.mr-15 {
  margin-right: 15px;
}
.mr-16 {
  margin-right: 16px;
}
.mr-20 {
  margin-right: 20px;
}
.mr-30 {
  margin-right: 30px;
}
.title-color {
  color: $bg-33;
}

::v-deep .el-select__tags {
  flex-flow: nowrap;
  overflow: hidden;
}

.wrap-box {
  display: flex;
  align-items: stretch;
  padding: 15px 13px 10px 10px;

  $box-height: calc(100vh - 75px);

  .menu-box {
    border: $border-style;
    height: $box-height;
    width: 180px;
    margin-right: 9px;
    overflow: auto;
  }
  .photo-box {
    border: $border-style;
    width: 180px;
    height: $box-height;
    overflow: auto;
    padding-top: 30px;
  }
  .photo-box-search {
    position: absolute;
    border: $border-style;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    box-shadow: 0 0px 10px 1px #707070;
    ::v-deep input {
      border: none;
      border-radius: 0;
    }
    height: 30px;
  }

  .center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 15px;
    .el-button {
      width: 46px
    }
    .el-button + .el-button {
      margin-left:0;
      margin-top: 10px;
      
    }
  }

  .right {
    flex: 1;
    height: $box-height;
    border: $border-style;
    overflow: hidden;

    .list-area {
      padding: 0 10px 10px 11px;
      overflow-y: auto;
      position: relative;
    }
  }
}
.opration-container {
  padding: 0 15px;
  width: 100%;
}
.list-title-row {
  @include first-row();
  margin-bottom: 5px;
  white-space:nowrap;
  &__left {
    color: $font-66;
    flex: 1;
  }
}
.center{
  .el-button--small{min-width: 46px;
    padding: 0;font-size: 12px;
    text-align: center;}
  }
  ::v-deep .el-button--small i{padding-right:0 !important;}
</style>